<template>
  <view>
    <TopActionBar v-if="0" />
    <PagesContainer v-if="0" has-custom-navbar scroll-container>
      <view class="page-container">
        <u-swiper
          :list="swiperList"
          height="300rpx"
          radius="16rpx"
          indicator
          indicator-mode="dot"
          autoplay
          circular
        />

        <view class="menu-container mt-30rpx">
          <view
            v-for="menu in menuList"
            :key="menu.key"
            class="menu-item col-4"
            @click="handleMenuClick(menu)"
          >
            <u-icon :name="menu.icon" size="60rpx" />
            <text class="menu-text">{{ menu.title }}</text>
          </view>
        </view>

        <view class="btn">
          <u-button type="primary" @click="handleTest">测试实名小程序</u-button>
        </view>

        <view class="card-container mt-30rpx">
          <view class="-mt-20rpx -mx-10rpx">
            <u-tabs
              :list="newsTabList"
              line-color="#386EE8"
              line-width="40rpx"
              line-height="10rpx"
              :item-style="{ height: '96rpx' }"
              :active-style="{ color: '#333', fontSize: '36rpx' }"
              :inactive-style="{ color: '#999', fontSize: '32rpx' }"
              @change="(ev) => (tabActive = ev.index)"
            />
          </view>

          <view class="news-list">
            <view
              v-for="news in newsList"
              :key="news.id"
              class="news-item"
              @click="handleNewsClick(news)"
            >
              <view class="news-content">
                <text class="news-title line-clamp-2">{{ news.title }}</text>
                <view class="news-info">
                  <text class="news-time">{{ news.time }}</text>
                </view>
              </view>
              <view class="news-img">
                <u-image
                  :src="news.img"
                  width="160rpx"
                  height="160rpx"
                  radius="10rpx"
                />
              </view>
            </view>
          </view>
        </view>
      </view>
    </PagesContainer>

    <image
      src="https://636c-cloud1-6gf7x3b791224edc-1325369568.tcb.qcloud.la/dhk_banner.jpg?sign=91b3339a6cac16fdc330e25f00351caf&t=1712384622"
      class="w-full h-screen"
    ></image>
  </view>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'

import PagesContainer from '@/components/pages-container/pages-container.vue'
import TopActionBar from '@/components/top-action-bar.vue'
import { userStore } from '@/store'
import { openMiniAppHelper } from '@/utils'
import { showToast } from '@/utils/helper/uniHelper'

@Component({ name: 'Form', components: { PagesContainer, TopActionBar } })
export default class Form extends Vue {
  handleTest() {
    openMiniAppHelper(
      {
        queryData: {
          name: '彭强',
          idCard: '362426199711276418',
          phone: 13247066121
        },
        extraData: {
          token: userStore.getToken
        }
      },
      {
        envVersion: 'develop'
      }
    )
  }

  swiperList = [
    'https://ui-resourse.oss-cn-shenzhen.aliyuncs.com/picture/2022/12/13/MdLYLBKjegDRFFnT.png'
  ]

  menuList: MenuItem[] = [
    {
      key: 'menu-1',
      title: '报警记录',
      icon: '/static/index/menu-0.png',
      url: '/pages/alarm-record/list',
      type: 'page'
    }
  ]

  handleMenuClick(item: MenuItem | null) {
    if (!item) return
    if (!item.url) return showToast('功能开发中，敬请期待')

    switch (item.type) {
      case 'page':
        uni.navigateTo({
          url: item.url
        })
        break
      case 'webview':
        uni.navigateTo({
          url: `/pages/webview/index?url=${item.url}`
        })
        break
      default:
        break
    }
  }

  tabActive = 0
  newsTabList = [
    { name: '交通法规' },
    { name: '公告通知' },
    { name: '交通新闻' },
    { name: '交通知识' },
    { name: '交通安全' }
  ]

  newsList: Recordable[] = Array(3).fill(
    [
      {
        id: '1',
        img: 'https://ui-resourse.oss-cn-shenzhen.aliyuncs.com/picture/2022/12/13/MdLYLBKjegDRFFnT.png',
        title:
          '章贡话安全 12月13日，章贡区交通安全委员会召开2022年度交通安全宣传教育工作会议，会议传达了《关于加强交通安全宣传教育工作的通知》精神，部署2022年度交通安全宣传教育工作。',
        time: '2021-12-13'
      }
    ][0]
  )

  handleNewsClick(item: Recordable) {
    console.log(item)
    return null
    // uni.navigateTo({
    //   url: `/pages/news/detail?id=${item.id}`
    // })
  }

  async onLoad() {
    // uni.showShareMenu({
    //   menus: ['shareAppMessage', 'shareTimeline']
    // })
  }
}
</script>

<style lang="scss" scoped>
.menu-text {
  font-weight: 400;
  font-size: $font-size-sm;
  line-height: 36rpx;
  margin-top: 10rpx;

  color: $color-first-text;
}

.news-list {
  margin-top: $space-base;

  .news-item {
    display: flex;
    padding: $space-base 0;
    border-bottom: 1rpx solid #f2f2f2;

    .news-content {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height: 160rpx;
      padding: 10rpx 0;

      .news-title {
        font-weight: 500;
        font-size: $font-size-xl;
        line-height: 46rpx;
        color: $color-first-text;
      }

      .news-desc {
        margin-top: 10rpx;
        font-size: $font-size-sm;
        line-height: 36rpx;
        color: $color-third-text;
      }

      .news-info {
        display: flex;
        align-items: center;
        margin-top: 10rpx;

        .news-time {
          font-size: $font-size-xs;
          line-height: 34rpx;
          color: $color-third-text;
        }
      }
    }

    .news-img {
      padding-left: $space-base;
    }
  }
}
</style>
